<template>
  <a-card :bordered="false" class="mt-m lf">
    <div class="flex flex-a-c mb-20">
      <span class="text-size-18 text000"> 分佣管理 </span>
      <a-alert :show-icon="false" class="w-fit ml-14" type="error"
        >每 30 天可以更改一次，更改后对所有用户 / VIP的新订单生效，请谨慎操作</a-alert
      >
    </div>
    <a-card>
      <a-form ref="formRef" :model="form" size="medium" auto-label-width label-align="left">
        <a-form-item label="基础自购比例：">
          <div class="flex-col">
            <a-input-number
              v-model="form.baseRate"
              :disabled="
                !formatTime(props.userInfoData.rateUpdatedAt) ||
                !props.userInfoData.isRateUpdate ||
                !props.userInfoData.isAllow == 1
              "
              :formatter="formatter"
              :parser="parser"
              :min="form.ratesConfig.baseRate"
              :max="form.ratesConfig.baseSubRate"
              class="w-25n"
              placeholder="请输入"
            />
            <span class="text-red mt-12"
              >限额范围：{{ form.ratesConfig.baseRate }}%-{{ form.ratesConfig.baseSubRate }}%</span
            >
          </div>
        </a-form-item>
        <a-form-item label="提成比例：">
          <div class="flex-col">
            <a-input-number
              v-model="form.commissionRate"
              :disabled="
                !formatTime(props.userInfoData.rateUpdatedAt) ||
                !props.userInfoData.isRateUpdate ||
                !props.userInfoData.isAllow == 1
              "
              :formatter="formatter"
              :parser="parser"
              :min="form.ratesConfig.commissionRate"
              :max="form.ratesConfig.commissionSubRate"
              class="w-25n"
              placeholder="请输入"
            />
            <span class="text-red mt-12"
              >限额范围：{{ form.ratesConfig.commissionRate }}%-{{ form.ratesConfig.commissionSubRate }}%</span
            >
          </div>
        </a-form-item>
        <a-form-item label="渠道方{{ userStore.userInfo.rewardChannelStr }}比例：">
          <div class="flex-col">
            <span v-if="form.baseRate && form.commissionRate">{{ 100 - form.baseRate - form.commissionRate }}%</span>
            <span v-else>自动计算</span>
          </div>
        </a-form-item>
      </a-form>
      <div class="text999" v-if="!props.userInfoData.isAllow == 1">
        <span v-if="props.userInfoData.rateUpdatedAt">*更改比例可能对用户造成较大影响，确需更改请联系管理员。</span>
      </div>
      <div class="text-red" v-else-if="!props.userInfoData.isRateUpdate == 1">
        <span v-if="props.userInfoData.rateUpdatedAt">{{ props.userInfoData.rateUpdatedAt }}后可调整</span>
      </div>
      <a-space v-else>
        <a-button @click="handleReset">重置</a-button>
        <a-button
          type="primary"
          :disabled="
            form.baseRate == props.userInfoData.baseRate && form.commissionRate == props.userInfoData.commissionRate
          "
          @click="onOk"
          >提交</a-button
        >
      </a-space>
    </a-card>
  </a-card>
</template>

<script setup>
import { useLayer } from '@/hooks'
import Edit from './Edit.vue'
import dayjs from 'dayjs'
import { useUserStore } from '@/store'
const userStore = useUserStore()

const props = defineProps(['userInfoData'])

const formRef = ref()
const form = reactive({
  baseRate: undefined,
  commissionRate: undefined,
  mobile: undefined,
  ratesConfig: {
    baseRate: 0,
    baseSubRate: 0,
    commissionRate: 0,
    commissionSubRate: 0
  }
})

watch(
  () => props.userInfoData,
  (e) => {
    if (!e || JSON.stringify(e) === '{}') return
    const formatData = JSON.parse(JSON.stringify(e))
    form.baseRate = Number(formatData.baseRate)
    form.commissionRate = Number(formatData.commissionRate)
    form.ratesConfig.baseRate = Number(formatData.ratesConfig.baseRate)
    form.ratesConfig.baseSubRate = Number(formatData.ratesConfig.baseSubRate)
    form.ratesConfig.commissionRate = Number(formatData.ratesConfig.commissionRate)
    form.ratesConfig.commissionSubRate = Number(formatData.ratesConfig.commissionSubRate)
    form.mobile = formatData.mobile
  },
  {
    immediate: true,
    deep: true
  }
)

const formatTime = (time) => {
  if (!time) return true
  const currentTime = dayjs()
  const givenDayjs = dayjs(time)
  if (givenDayjs.isAfter(currentTime)) return false
  return true
}

const formatter = (value) => {
  return `${value}%`
}
const parser = (value) => {
  return value.replace(/%/g, '')
}

// 重置
const handleReset = () => {
  form.baseRate = Number(props.userInfoData.baseRate)
  form.commissionRate = Number(props.userInfoData.commissionRate)
}
const onOk = () => {
  if (!form.baseRate) return Message.error('基础自购比例不能为空')
  if (!form.commissionRate) return Message.error('提成比例不能为空')
  useLayer().openLayer(Edit, {
    title: `更改分佣比例`,
    params: { form, userInfoData: props.userInfoData }
  })
}
</script>
